<template>
  <el-table ref="tableData" class="tableComponents" :loading="loading" highlight-current-row :data="listData" border
    stripe style="{width: 100%}" @selection-change="handleSelectionChange">
    <el-table-column v-if="showSelectColumn" type="selection" align="center" width="60"
      :selectable="selectable"></el-table-column>
    <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="80"></el-table-column>
    <template>
      <el-table-column v-for="(propItem, index) in propList" :key="index" v-bind="propItem" align="center"
        show-overflow-tooltip>
        <template #default="scope">
          <slot :name="propItem.slotName" :row="scope.row">
            {{ scope.row[propItem.prop] }}
          </slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      required: true,
    },
    propList: {
      type: Array,
      required: true,
    },
    showIndexColumn: {
      type: Boolean,
      default: true,
    },
    showSelectColumn: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 1, pageSize: 10, total: 10 }),
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    listData: {
      handler () {
        this.changeSerial()
      },
      deep: true
    }
  },
  data () {
    return {
      height: ''
    }
  },
  watch: {
    listData () {
      this.changeSerial()
    }
  },
  mounted () {

    this.changeSerial()
  },
  methods: {
    changeSerial () {
      let formLength = 10 - this.listData.length
      if (this.listData && this.listData.length >= 0 && this.listData.length < 10) {
        for (let i = 0; i < formLength; i++) {
          this.listData.push({ $index: this.listData.length + 1 + '' })
        }
      }
    },
    handleSizeChange () {
      this.$emit("handleSizeChange", this.page.pageSize);
    },
    handleCurrentChange (row) {
      this.$emit("handleCurrentChange", row);
    },
    handleSelectionChange (row) {
      this.$emit("handleSelectionChange", row);
    },
    //table项是否可以被选中
    selectable (row) {
      return !('$index' in row)
    },
  },
};
</script>

<style scoped lang="scss">
.pagination {
  position: absolute;
  bottom: 0;
  right: 0;
}

::v-deep .el-table td,
::v-deep .el-table th {
  padding: 5px 0;
  text-align: center;
}

::v-deep .el-table__row td {
  background: #d6ebfe !important;
}

::v-deep .el-table__row--striped td {
  background: #ffffff !important;
}

::v-deep .has-gutter tr,
::v-deep .has-gutter th {
  background: #55aaff !important;
  color: #ffffff;
}

::v-deep .el-table__body-wrapper {
  height: calc(100% - 45px);
  padding-bottom: 25px;
  overflow: auto;
}

.tableComponents {
  height: 100%;
  overflow: hidden;
  border-radius: 6px !important;
  overflow: hidden;
}
</style>
